<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <link rel="stylesheet" href="/shop/assets/css/loginFace.css" />
  <script src="/shop/assets/js/jquery-3.6.js"></script>
  <style>
    .bar1 {
      transform:rotate(0deg) translate(0, -40px);opacity:0.12;
    }
    .bar2 {
      transform:rotate(45deg) translate(0, -40px);opacity:0.25;
    }
    .bar3 {
      transform:rotate(90deg) translate(0, -40px);opacity:0.37;
    }
    .bar4 {
      transform:rotate(135deg) translate(0, -40px);opacity:0.50;
    }
    .bar5 {
      transform:rotate(180deg) translate(0, -40px);opacity:0.62;
    }
    .bar6 {
      transform:rotate(225deg) translate(0, -40px);opacity:0.75;
    }
    .bar7 {
      transform:rotate(270deg) translate(0, -40px);opacity:0.87;
    }
    .bar8 {
      transform:rotate(315deg) translate(0, -40px);opacity:1;
    }

    #div1 {
      z-index: 1000;
      position:absolute;
      width:100px;
      height:100px;
      top: 35%;
      left: 45%;
      transform:scale(0.5);
      transform:scale(0.5);

      /* not used right now: */
      animation-name: rotateThis;
      animation-duration:2s;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
    }
    #div1 div{
      z-index: 1000;
      width:10px;
      height:30px;
      background:greenyellow;
      position:absolute;
      top:35px;
      left:45px;
    }
    /* shadows for the first spinner */
    #div1 div {
      box-shadow:black 0 0 4px
    }
  </style>
  <script>
    var count = 0;
    function rotate() {
      var elem = document.getElementById('div1');
      elem.style.transform = 'scale(0.5) rotate('+count+'deg)';
      if (count==360) { count = 0 }
      count+=45;
      window.setTimeout(rotate, 100);
    }
    window.setTimeout(rotate, 100);
  </script>
</head>
<body>
<div id="div1" style="display: none">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
  <div class="bar7"></div>
  <div class="bar8"></div>
</div>
<div class="container">
  <img src="2.jpeg" id="loading" />
  <div class="qr-scanner">
    <div class="box">
      <div class="line"></div>
      <div class="angle"></div>
    </div>
  </div>
  <h1><span id="count-down"></span></h1>
  <video id="video"></video>
</div>



<div class="btn" onclick="openUserMedia()">
  <div class="glitch"></div>
  <div class="text" data-text="FACE">开始识别</div>
  <span class="platform">R25</span>
</div>

<canvas id="canvas"></canvas>
<script>
  var div1=document.getElementById("div1");
  var img = document.getElementById("img");
  var videoV = document.getElementById("video");
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var mediaStreamTrack = null;
  var loading = document.getElementById("loading");

  function success(stream) {
    //兼容webkit核心浏览器
    // var CompatibleURL = window.URL || window.webkitURL;
    //将视频流转化为video的源
    mediaStreamTrack = stream;
    try {
      // video.src = CompatibleURL.createObjectURL(stream);
      videoV.srcObject = stream;
    } catch (e) {
      console.log("访问用户媒体设备失败：", error.name, error.message);
    }

    videoV.play(); //播放视频
    //将视频绘制到canvas上
    alert("请将人脸放在区域中间");
    timeAjax();
  }
  function timeAjax() {
    setTimeout(ajax, 1000);
  }
  function ajax() {

    //发送到服务器
    div1.style.display="inline-block";
    var imgBase64 = getFace();
    //发送到服务器
    $.ajax({
      url: "http://localhost:8080/shop/admin/faceRecognition",
      type: "post",
      data: { base64: imgBase64 },
      async: true,
      //dataType:"json",
      //contentType:"application/json;charset=utf-8",
      success: function (responseText) {
        if (responseText == "-1") alert("请保持一个人脸");
        else if (responseText == "-2") {
          alert("你没有账号，请去注册,再来登录");
          window.location.href = "http://localhost:8080/shop/admin/goToRegisterPage";
        } else if (responseText == "0") {
          alert("请连接网络");
        } else {
          alert(responseText);
          window.location.href = "http://localhost:8080/shop/admin/faceRecognitionLogin";
        }
        div1.style.display="none";
        timeAjax();
      },
      error: function () {
        div1.style.display="none";
        console.log("error");
      },
    });
  }
  //当调用媒体错误时，会调用该函数
  function error(error) {
    console.log("访问用户媒体失败：", error.name, error.message);
  }
  function getUserMediaToPhoto(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
      //最新标准API。
      navigator.mediaDevices
              .getUserMedia(constraints)
              .then(success)
              .catch(error);
    } else if (navigator.webkitGetUserMedia) {
      //webkit核心浏览器
      navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
      //firefox浏览器
      navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
      //旧版API
      navigator.getUserMedia(constraints, success, error);
    }
  }
  //将视频绘制到canvas上
  function getFace() {
      context.drawImage(videoV, 0, 0, 300, 150);
      //将画布设置为图片类型
      context.img = canvas.toDataURL("image/jpg");
      //获取完整的base64编码
      context.img = context.img.split(",")[1];
      return context.img;
  }
  //打开摄像头
  function openUserMedia() {
    if (
            navigator.mediaDevices.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia
    ) {
      const constraintsCanvas = {
        audio: false,
        video: {
          width: { min: 1024, ideal: 1280, max: 1920 },
          height: { min: 576, ideal: 720, max: 1080 },
        },
      };
      getUserMediaToPhoto(constraintsCanvas, success, error);
    } else {
      alert("你的浏览器不支持访问用户媒体设备");
    }
    if (loading) loading.remove();
  }
  //关闭摄像头
  function offUserMedia() {
    if (mediaStreamTrack != null) mediaStreamTrack.getTracks()[0].stop();
  }
</script>
</body>
</html>
